.loading_mask .loading_progress {
  flex-flow: column nowrap;
  width: 100%;
  height: 10%;

  #nprogress {
    display: none;
  }

  .progress_bar_container {
    display: flex;
    width: 100%;
    height: 0.14rem;
    margin: 1rem 0;
    transition: opacity .8s;


    .progress_left,
    .progress_right {
      position: relative;
      width: 60%;
      height: 100%;
      background-color: #fff;
      transition: transform .3s;
    }

    .progress_left {
      transform: translateX(-100%);

      &::after {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 100vh;
        background-color: #fff;
        box-shadow: 0 0 5px 2px #fff;
        transform: translateY(-30%);
      }
    }

    .progress_right {
      transform: translateX(100%);

      &::before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 100vh;
        background-color: #fff;
        box-shadow: 0 0 5px 2px #fff;
        transform: translateY(-30%);
      }
    }
  }

  .text {
    font-family: 'Orbitron';
    font-size: 1.4rem;
    text-align: center;
  }
}